<template>
  <div class="aui-margin-t-15">
    <div class="aui-content aui-margin-15">
      <ul class="aui-list">
       <li class="aui-list-item" @click="toList('feed')">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">热门</div>
                <div class="aui-list-item-right">
                    <div>更多</div>
                </div>
            </div>
        </li>
      </ul>
      <template v-for="item in hot_list">
        <article-item :item="item" :key="item.id"></article-item>
      </template>
    </div>
     <div class="aui-content aui-margin-15">
      <ul class="aui-list">
        <li class="aui-list-item" @click="toList('top')">
          <div class="aui-list-item-inner aui-list-item-arrow">
            <div class="aui-list-item-title">置顶</div>
            <div class="aui-list-item-right">
              <div style="position: relative; top: 0; left: 0">更多</div>
            </div>
          </div>
        </li>
      </ul>
       <template v-for="item in top_list">
        <article-item :item="item" :key="item.id"></article-item>
      </template>
    </div>
     <div class="aui-content aui-margin-15">
      <ul class="aui-list">
        <li class="aui-list-item" @click="toList('focus')">
          <div class="aui-list-item-inner aui-list-item-arrow">
            <div class="aui-list-item-title">关注</div>
            <div class="aui-list-item-right">
              <div style="position: relative; top: 0; left: 0">更多</div>
            </div>
          </div>
        </li>
      </ul>
        <template v-for="item in focus_list">
        <article-item :item="item" :key="item.id"></article-item>
      </template>
    </div>
  </div>
</template>

<script>
import ArticleItem from "@/components/ArticleItem.vue";
export default {
  components: {
    ArticleItem,
  },
  data(){
    return{
      hot_list:[
         {
          id: 1,
          category:'新闻圈',
          type: "normal",
          author:'胖子',
          created_at:'31分钟前',
          title:'鹿晗公开恋情！陆地夫妇成笑话，迪丽热巴反击酷爆！',
          content:' 近日，俄军最高统帅部组织了第五届全军炮兵旅预备队实地演练，出动了大批重型火炮，其中就包括当今口径最大的自行迫击炮——2S4“郁金香”240毫米自行迫击炮。本图集就此解读。',
          comment:24,
          laud:23,
          display:999,
          images: [""],
          is_top:true
        },
         {
          id: 2,
          category:'新闻圈1',
          type: "normal",
          author:'胖子',
          created_at:'31分钟前',
          title:'鹿晗公开恋情！陆地夫妇成笑话，迪丽热巴反击酷爆！',
          content:' 近日，俄军最高统帅部组织了第五届全军炮兵旅预备队实地演练，出动了大批重型火炮，其中就包括当今口径最大的自行迫击炮——2S4“郁金香”240毫米自行迫击炮。本图集就此解读。',
          comment:24,
          laud:23,
          display:999,
          images: ["",'',''],
        },
      ],
      focus_list:[
         {
          id: 1,
          category:'新闻圈',
          type: "normal",
          author:'胖子',
          created_at:'31分钟前',
          title:'鹿晗公开恋情！陆地夫妇成笑话，迪丽热巴反击酷爆！',
          content:' 近日，俄军最高统帅部组织了第五届全军炮兵旅预备队实地演练，出动了大批重型火炮，其中就包括当今口径最大的自行迫击炮——2S4“郁金香”240毫米自行迫击炮。本图集就此解读。',
          comment:24,
          laud:23,
          display:999,
          images: [""],
          is_top:true
        },
         {
          id: 2,
          category:'新闻圈1',
          type: "normal",
          author:'胖子',
          created_at:'31分钟前',
          title:'鹿晗公开恋情！陆地夫妇成笑话，迪丽热巴反击酷爆！',
          content:' 近日，俄军最高统帅部组织了第五届全军炮兵旅预备队实地演练，出动了大批重型火炮，其中就包括当今口径最大的自行迫击炮——2S4“郁金香”240毫米自行迫击炮。本图集就此解读。',
          comment:24,
          laud:23,
          display:999,
          images: ["",'',''],
        },
      ],
      top_list:[
         {
          id: 1,
          category:'新闻圈',
          type: "normal",
          author:'胖子',
          created_at:'31分钟前',
          title:'鹿晗公开恋情！陆地夫妇成笑话，迪丽热巴反击酷爆！',
          content:' 近日，俄军最高统帅部组织了第五届全军炮兵旅预备队实地演练，出动了大批重型火炮，其中就包括当今口径最大的自行迫击炮——2S4“郁金香”240毫米自行迫击炮。本图集就此解读。',
          comment:24,
          laud:23,
          display:999,
          images: [""],
          is_top:true
        },
         {
          id: 2,
          category:'新闻圈',
          type: "normal",
          author:'胖子',
          created_at:'31分钟前',
          title:'鹿晗公开恋情！陆地夫妇成笑话，迪丽热巴反击酷爆！',
          content:' 近日，俄军最高统帅部组织了第五届全军炮兵旅预备队实地演练，出动了大批重型火炮，其中就包括当今口径最大的自行迫击炮——2S4“郁金香”240毫米自行迫击炮。本图集就此解读。',
          comment:24,
          laud:23,
          display:999,
          images: [""],
          is_top:true
        }
      ]
    }
  },
  methods:{
    toList(page){
      const pages = {
        'feed':'/feed',
        'top':'/feed?status=top',
        'focus':'/feed?status=focus',
      }
      this.$router.push(pages[page])
    }
  }
};
</script>

<style>
body{
  background: #f6f7fb;
}
.aui-content{
  background-image: none;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.aui-content .aui-list-item-title{
  font-weight: bold;
  font-size:15px;
  color:#1e1e1e;
}
.aui-content .aui-list{
  background-image: none;
}
.aui-content .aui-list .aui-list-item{
  margin:0;
  padding-left:15px;
  background-image: none;
}
</style>